import React, { Component } from 'react'

export default class Demo1 extends Component {
  constructor(){
    super()
    this.state={
        count:0,
        person:{
            name:'Giles',
            age:39,
            job:'teacher'
        }
    }
  }
  shouldComponentUpdate(nextProps, nextState){
    // if(this.state.count!=nextState.count){
    //     //该方法的返回值如果为true，就会继续执行render函数
    //     return true
    // }else{
    //     return false //如果返回false则阻止render的运行
    // }
    if(this.state.person.name!=nextState.person.name){
        return true
    }else{
        return false
    }
  
  }
  render() {
    console.log('------render---------');
    return (
      <div>
         <h1>shouldComponentUpdate优化性能</h1>
         <h2>{this.state.count}</h2>
         <button onClick={()=>{
            this.setState({
                count:Math.floor(Math.random()*3)
            })
         }}>更新</button>
         <hr />
         <h1>{JSON.stringify(this.state.person)}</h1>
         <button onClick={()=>{
            this.setState({
                person:{
                    ...this.state.person,
                    name:'zhaijizhe'
                }
            })
         }}>改名</button>
         <button onClick={()=>{
            this.setState({
                person:{
                    ...this.state.person,
                    age:this.state.person.age+1
                }
            })
         }}>改年龄</button>
      </div>
    )
  }
}
